<template>
<div class="menutwo">
        <!-- <p>推荐音乐</p>
   <p>排行榜</p>
   <p>歌单</p>
   <p>新碟上架</p> -->
        <RouterLink to="/find/recommend" style="color: black;">推荐</RouterLink>
        <!--为了不让首页太单调，直接在home上展示find界面，
        但由于find之下还有一个二级路由，所以直接把这个展出在find上
        也就展示在了home上
        所以这里就直接用这个二级路由的组件来展示find界面
        推荐
        但是按照网易云的点击逻辑，本身的路径跟find的路径是一样的，
         -->
        <RouterLink to="/find/rank">排行榜</RouterLink>
        <RouterLink to="/find/songs">歌单</RouterLink>
        <RouterLink to="/find/fm">私人FM</RouterLink>
        <RouterLink to="/find/singer">歌手</RouterLink>
        <RouterLink to="/find/mv">新碟上架</RouterLink>
        <!-- 上面几个作为二级路由 -->
         <!--  -->
    </div>
    <!-- 直接进行展示页面内容，而不是将其作为二级路由 -->
    <!-- <Discover></Discover> -->
    <RouterView></RouterView>   
</template>

<script setup>

import Discover from './finds/Discover.vue';


</script>

<style  scoped>
.menutwo{
    height: 30px;
  background-color: brown;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 水平居左 */
  padding-left: 155px; /* 内边距，调整内容与边缘距离 */
  font-family: Arial, sans-serif; /* 字体设置 */
}
a{
    text-decoration: none;
  color: white;
  font-size: 14px; /* 字体大小 */
  margin-right: 70px; /* 链接间间距 */
  transition: color 0.3s ease; /* 鼠标悬停动画过渡效果 */
  &:hover {
    color: #000000; /* 鼠标悬停颜色 */
  }
}
</style>